View{
  box-sizing: border-box;
}
.body{
  width: 100vw;
  min-height: 100vh;
  background-repeat:no-repeat;
  background-size: 100%;
  background-color: #EA001C;
}

.lottery_head{
  width: 100%;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .lottery_head_btn{
		font-size: 28px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFA61;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn-ico{
			width: 34px;
			height: 34px;
			margin-right:8px;
		}
  }
}

.lottery_box{
  width: calc( 100% - 48px );
  margin-left: 24px;
  padding: 24px;
  background: linear-gradient(180deg, #FF9767 0%, #FF6A47 100%);
  border-radius: 16px;
  position: relative;
  margin-top: 20px;

  .lottery_box_border_top{
    width: calc(100% - 48px );
    height: 24px;
    // border-radius: 16px 16px 0 0;
    position: absolute;
    top: 0;
    left: 24px;
    // background: #FF9565;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .lottery_box_border_bottom{
    width: calc(100% - 48px );
    height: 24px;
    // border-radius:  0 0 16px 16px;
    position: absolute;
    bottom: 0;
    left: 24px;
    // background: #FF9565;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .lottery_box_border_left{
    width: 24px;
    height:100%;
    border-radius:  16px 0 0 16px  ;
    position: absolute;
    top: 0;
    left: 0;
    // background: #FF9565;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }

  .lottery_box_border_right{
    width: 24px;
    height:100%;
    border-radius: 0 16px 16px 0 ;
    position: absolute;
    top: 0;
    right: 0;
    // background: #FF9565;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }

  .lottery_box_border_light{
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background: #FFE56B;
  }

  .light2{
    background:#EE3A1C ;
  }

  .lottery_box_mian{
    background-color: #B61B10;
    width: 100%;
    padding: 24px;
    border-radius: 16px;

    .lottery_box_s{
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      .lottery_box_view{
        width: 186px;
        height: 186px;
        // margin: 12px;
        border-radius:16px ;
        // background-color: #ffffff;
				background: url('https://static3.jekunauto.com/img/luck/box_bg.png');
				background-size:100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 24px;
        position: relative;
        .lottery_box_view_center{
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          transition: all .3s;
          // background: #FFE048;
          // border-radius:16px ;
          // box-shadow:0px -10px 0 #FE8F05 inset;
					background: url('https://static3.jekunauto.com/img/luck/luck_btn_active.png');
					background-size:100% 100%;

          .lottery_box_view_center_text_b{
            font-size:60px;
            color: #C52717;
          }
          .lottery_box_view_center_text_s{
            font-size:24px;
            color: #C52717;
            margin-top: 6px;
          }
        }

        .lottery_box_view_center_isRolling{
					background: url('https://static3.jekunauto.com/img/luck/luck_btn_disabled.png');
					background-size:100% 100%;

          // @extend .lottery_box_view_center;
          // background: #F64F32;
          // border-radius:16px ;
          // transition: all .3s;
          // box-shadow:none;

          // .lottery_box_view_center_text_b_isRolling{
          //   @extend .lottery_box_view_center_text_b;
          //   color: #C42717;
          // }
          // .lottery_box_view_center_text_s_isRolling{
          //   @extend .lottery_box_view_center_text_s;
          //   color: #C42717;
          // }
        }

        .lottery_box_btn{
          background-color: #FFE048;
          box-shadow: 0px -10px 5px #F99104 inset;
        }

        .lottery_box_view_shadow{
          position:absolute;
          top: 0;
          left: 0;
          background: #000000;
          opacity: .8;
          width: 100%;
          height: 100%;
          border-radius: 16px;
        }

        .lottery_box_view_img{
          display: block;
          width: 126px;
          height: 126px;
        }

        .lottery_box_view_title{
          width: 100%;
          text-align: center;
          color: #333333;
          font-size: 24px;
          margin-top: 2px;
        }
      }

      .lottery_box_view_active{
        background-color: black;
        opacity: .8;
      }
      .lotterys{
        background: #fff001;
        width: 100%;
        height: 420px;
        min-height: 420px;
        border-bottom-left-radius: 80px;
        border-bottom-right-radius: 80px;
      }

      .lottery_box_view:nth-child(3n){
        margin-right: 0;
      }
    }

    .lottery_box_s:nth-child(3n){
      margin-bottom: 0;
    }
  }

}

.lottery_message{
  width: 100%;
  padding: 0 26px;
  color: #FFFFFF;
  font-size: 20px;
  margin-top: 24px;
}

.lottery_share{
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 24px;
  width: 100%;
  .lottery_share_btn{
    width: 100%;
    background: #D2331E;
    border-radius: 10px;
    color: #ffffff;
    font-size: 36px;
    padding: 6px 0;
    text-align: center;
    font-weight: bold;
  }
}

.dialog{
  width: 100vw;
  height: 100vh;
  overflow:hidden;
  position: fixed;
  top: 0;
  left: 0;
  transition: all .3s;
  .dialog_bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: .5;
    z-index: 10;
  }
  .dialog_body{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 550px;
    // height: 750px;
    background: #ffffff;
    z-index: 12;
    .dialog_body_main{
      width: 100%;
      height: 100%;
      position: relative;
      .dialog_body_main_icon{
        position: absolute;
        right: 0;
        top: -168px;
        z-index: 15;
      }
      .dialog_body_main_title{
        position: absolute;
        width: 650px;
        display: block;
        left: -50px;
        top: -180px;
      }
      .dialog_body_main_goods{
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       padding-top: 80px;
       padding-bottom: 160px;
       .dialog_body_main_goods_name{
         width: 100%;
         text-align: center;
        color: #333333;
        font-size: 40px;
        margin-bottom: 20px;
        word-wrap: break-word;
       }
        .dialog_body_main_goods_img{
          display: block;
          width: 300px;
          height: 300px;
        }
      }
      .dialog_body_main_share{
        width: 100%;
        padding: 24px;
        position: absolute;
        left: 0;
        bottom: 0;
        .dialog_body_main_share_btn{
          width: 100%;
          background: #D2331E;
          border-radius: 10px;
          color: #ffffff;
          font-size: 36px;
          padding: 6px 0;
          text-align: center;
          font-weight: bold;
        }
      }
    }
  }
}

.modal{
  position: relative;
  .at-modal__container{
    width: 600px !important;
  }
  .at-modal__content{
    min-height: 0 !important;
  }
  .modal-head{
    position: absolute;
    top: 0;
    left: 0;
  }
  .modal-img{
    display: block;
    width: 100%;
  }
}


.coupon-index {
  background-color: #f5f5f5;
  overflow: hidden;
  height: 100vh;
}

.coupon-code {
  position: relative;
  width: 100%;
  overflow: hidden;
  .coupon-history {
    position: absolute;
    top: 22px;
    right: 27px;
    z-index: 2;
  }
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 224px;
  }
  .coupon-code-wrap {
    position: relative;
    z-index: 2;
    width: 702px;
    height: 112px;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    margin: 168px auto 0;
    display: flex;
    padding: 24px;
    box-sizing: border-box;
    .code {
      display: block;
      border-bottom: 2px solid #e5e5e5;
      height: 100%;
      font-size: 28px;
      flex: 1;
      &::placeholder {
        color: #999999;
        font-size: 28px;
      }
    }
    .confirm-btn {
      margin-left: 24px;
      flex-shrink: 0;
      width: 200px;
      height: 100%;
      background: rgba(18, 179, 255, 1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #fff;
    }
  }
}

.tab-item {
  height: 88px;
  background-color: #fff;
  display: flex;
  .tab-li {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    &.act {
      .tab-li-text {
        color: #12b3ff;
        &::after {
          display: block;
        }
      }
    }
    .tab-li-text {
      position: relative;
      font-size: 28px;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      &::after {
        position: absolute;
        left: 0;
        bottom: -8px;
        content: "";
        width: 100%;
        height: 4px;
        background: rgba(18, 179, 255, 1);
        border-radius: 2px;
        display: none;
      }
    }
  }
}


.redpacket-bd {
  .tab-cont {
    // background: #fff;
    height: calc(100vh - 445px);
		overflow-y: auto;
		padding-top: 24px;
    .tab-storetext {
      font-size: 24px;
      color: #12b3ff;
    }
    // overflow-y: scroll;
    .tab-cont-item {
			padding-left:24px;
			background: #fff;
      .grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
      }
    }

    .rbtab-cont-item-li {
      position: relative;
      display: flex;
      padding: 24px 24px 24px 0;
      border-bottom: 1px solid #e5e5e5;
      overflow: hidden;
      box-sizing: border-box;
			background: #fff;
      &.grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
      }
      .tips {
        position: absolute;
        right: 24px;
        top: 24px;
        width: 146px;
        height: 40px;
        background: rgba(245, 39, 8, 0.1);
        border-radius: 6px;
        font-size: 20px;
        color: rgba(255, 59, 48, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .expireSoon-tips {
        position: absolute;
        left: -40px;
        top: 16px;
        width: 146px;
        height: 40px;
        background: rgba(255, 59, 48, 1);
        border-radius: 6px;
        font-size: 20px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        transform: rotate(-45deg);
      }
      .baobei-icon {
        width: 116px;
        height: 44px;
        background: #fefceb;
        opacity: 1;
        border-radius: 12px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 33px;
        color: #ff7026;
        margin-left: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .img {
        width: 104px;
        height: 104px;
        display: block;
        margin-right: 24px;
      }
      .cont {
        .rb-price {
          display: flex;
          width: 100%;
          align-items: center;
          color: #ff3b30;
          font-size: 42px;
          line-height: 56px;
          font-weight: Bold;
          &::first-letter {
            font-size: 20px;
          }
        }
        .text {
          font-size: 20px;
          color: #999;
        }
      }
    }
  }
}

.redpacket-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.redpacket-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .redpacket-uselog-btn {
    width: 100%;
    height: 94px;
    border: 2px solid rgba(18, 179, 255, 1);
    border-radius: 10px;
    box-sizing: border-box;
    color: #12b3ff;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


.self-dialog{
	position: fixed;
	left:0;
	right:0;
	bottom:0;
	top:0;
	position: fixed;
	z-index: 999;
	.self-mask{
		background: #000000;
		border-radius: 0px 0px 0px 0px;
		opacity: 0.8;
		position: fixed;
		left:0;
		right:0;
		bottom:0;
		top:0;
		position: fixed;
		z-index:9;
	}
	.self-content{
		// background: #fff;
		position: fixed;
		left:0;
		right:0;
		bottom:0;
		top:160px;
		position: fixed;
		z-index: 10;
	}
	.self-content-2{
		// background: #fff;
		position: fixed;
		left:0;
		right:0;
		bottom:0;
		top:0;
		position: fixed;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tips-content{
		width: 640px;
		height: 410px;
		background: url('https://static3.jekunauto.com/img/luck/tips_bg.png');
		background-size:100% 100%;
		margin-top: -100px;
		font-size: 32px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.tips-txtbox{
			margin-top: 120px;
		}
		&.result-content{
			width: 640px;
			height: 757px;
			background: url('https://static3.jekunauto.com/img/luck/result_bg.png');
			background-size:100% 100%;
			align-items: flex-start;
			padding-top: 180px;
		}
	}
	.tips-close{
		width: 80px;
		height: 80px;
		background: url('https://static3.jekunauto.com/img/luck/tips_close.png');
		background-size:100% 100%;
		position: absolute;
		right:0;
		top:-50px;
		z-index: 10;
	}
	.self-title{
		width: 100%;
		height: 180px;
		background: url('https://static3.jekunauto.com/img/luck/dialog_title.png');
		background-size:100% 100%;
		text-align: center;
		font-size: 42px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		padding-top: 90px;
	}
	.result-imgbox{
		width: 300px;
		height: 300px;
		background: #FFF9DE;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.result-txtbox{
		font-size: 30px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 30px;
		text-align: center;
	}
	.mb10{
		margin-bottom: 10px;
	}
	.result-seek-btn{
		width: 367px;
		height: 77px;
		background: #FBED43;
		border-radius: 50em;
		font-size: 32px;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FF2929;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 38px auto 0;
	}


}

.rule-box{
	height:calc(100vh - 340px);
	overflow-y: auto;
	background: #fff;
	padding:24px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	text-align: justify;
}

.count-box{
	width: 283px;
	height: 49px;
	background: linear-gradient(129deg, #E40E54 0%, #FF5F29 100%);
	border-radius:50em;
	opacity: 1;
	font-size: 30px;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:250px auto 0;
}

.coupon-bd{
	padding-top: 24px;
	height: calc(100vh - 430px);
	overflow-y: auto;
}
.coupon-list{
	background: #fff;
	padding-left:24px;
	.coupon-item{
		padding:20px 24px 20px 0;
		width: 100%;
		display: flex;
		border-bottom:1px solid #E5E5E5;
		&__img{
			width: 180px;
			height: 180px;
		}
		&__left{
			width:180px;
			height: 180px;
			margin-right:24px;
		}
		&__right{
			flex:1;
		}
		&__name{
			height: 42px;
			font-size: 30px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 8px;
		}
		&__shop,&__date{
			height: 30px;
			font-size: 20px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 8px;
		}
		.use-btn__warp{
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}
		.use-btn{
			width: 134px;
			height: 54px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF2929;
			border-radius: 40px 40px 40px 40px;
			opacity: 1;
			font-size: 26px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFF3F3;
		}
		.use-txt{
			font-size: 26px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
}

.scroll-bt-tips {
	font-size: 24px;
	font-weight: 500;
	color: #999999;
	padding: 20px;
	text-align: center;
	text-indent: -24px;
}

.self-combox{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
